<template>
    <div class="new-box">
        <div class="binding-return">
            <i @click="playbindingreturn()" class="bindingticon iconfont icon-jiantou"></i>
            <span>我的消息</span>
            <div style="float: right ;line-height: 24px;" @click='noiceAll'>全部已读</div>
        </div>
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text=""
        @load="onLoad"
        >
            <ul class="new-list" v-if="listData.length>0">
                <li v-for="val in listData" :class="val.state == 1?'look':''">
                    <p>{{val.createTime}}</p>
                    <h1>{{val.noticeTitle}}</h1>
                    <div class="new-list-span">
                        {{val.noticeContent}}
                    </div>
                </li>
            </ul>
            <noData v-else></noData>
        </van-list>
    </div>
</template>

<script>
    import noData from "../public/noData"
    import { List,Toast } from 'vant';
    export default {
        name: "newshou",
        data(){
            return{
                userId:"",
                loading: false,
                finished: false,
                num:0,
                total:0,
                listData:[]
            }
        },
        components: {
            [List.name]:List,
            noData
        },
        mounted() {            
            this.userId = localStorage.getItem('user_id');
        },
        methods:{
            noiceAll(){
                this.$http.post(this.utils.config+"/netmall/app/person/api/updateUserNoticeState?userId="+this.userId).then((data) => {
                    if(data.data.success){
                        Toast(data.data.message);
                        this.onLoad();
                    }
                })
            },
            playbindingreturn(){
                this.$router.go(-1);
            },
            onLoad() {
                var that = this;
                that.num++;
                that.$http.post(that.utils.config +"/netmall/app/person/api/getUserAllNotice1?noticeType=1&pageSize=10&pageNo="+this.num+"&userId="+this.userId).then((data) => {
                    if (data.data.success) {
                        this.total = data.data.result.total;
                        for(let i=0;i<data.data.result.records.length;i++){
                            that.listData.push(data.data.result.records[i]);
                            this.loading = false;
                        }
                        if(that.total == that.listData.length){
                            that.finished = true;
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>
    @import url("../../assets/font/iconfont.css");
    .new-box{
        min-height: 100%;
        width: 100%;
        background: #FFFFFF;
    }
    .binding-return{
        width: 100%;
        padding: 12px 10px 0 10px;
        height: 56px;
        text-align: center;
        position: relative;
        display: flex;
        justify-content: space-between;
          background: #FFFFFF;
    }
    .binding-return span{
        display: block;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;

    }
    .bindingticon{
        font-size: 18px;
        color: #000000;
        font-weight: 900;
    }

    .new-list{
        padding: 0 14px;


    }
    .new-list li{
        height: 139px;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        overflow: hidden;
    }
    .new-list li p{
        margin-top: 23px;
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:17px;
    }
    h1{
        margin-top: 8px;
        font-size:15px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:21px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .new-list-span{
        margin-top: 6px;
        height:44px;
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:20px;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .look{
        color:rgba(187,187,187,1)!important;
    }
</style>
